<template>
  <div class="box" :id="getChartIdString"></div>
</template>

<script>
export default {
  name: "my-gauge",
  props: {
    percent: {
      type: String,
      default: "75",
    },
    gaugeName: {
      type: String,
      default: "quality-gauge-chart1",
    },
  },
  computed: {
    getChartIdString() {
      return "#" + this.gaugeName;
    },
  },
  data() {
    return {
      chartRef: null,
      stylePreset: {
        "quality-gauge-chart1": {
          bg1: "#EBEEFF",
          bg2: "rgba(103,155,254,0.5)",
          color: "#2266EA",
        },
        "quality-gauge-chart2": {
          bg1: "#E2F0EB",
          bg2: "rgba(0,220,143,0.5)",
          color: "#00B575",
        },
        "quality-gauge-chart3": {
          bg1: "#fef7f0",
          bg2: "rgba(223,130,102,0.3)",
          color: "#e06262",
        },
      },
    };
  },
  methods: {
    initChart() {
      this.chartRef = this.$echarts.init(
        document.getElementById(this.getChartIdString)
      );
    },
    setChart() {
      let option = {
        tooltip: {
          formatter: "{c}%",
        },
        backgroundColor: [this.stylePreset[this.gaugeName].bg1],
        series: [
          {
            name: "",
            type: "gauge",
            detail: {
              backgroundColor: this.stylePreset[this.gaugeName].bg2,
              borderColor: "#eee",
              borderWidth: 1,
              width: "80%",
              lineHeight: 36,
              height: "100%",
              borderRadius: 50,
              offsetCenter: [0, 0],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value + "}{unit|%}";
              },
              rich: {
                value: {
                  fontSize: 16,
                  color: this.stylePreset[this.gaugeName].color,
                },
                unit: {
                  fontSize: 12,
                  color: this.stylePreset[this.gaugeName].color,
                },
              },
            },
            startAngle: 180,
            endAngle: -180,
            axisLine: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            pointer: { show: false },
            progress: {
              show: true,
              itemStyle: {
                color: "transparent",
                borderType: "dotted",
                opacity: 1,
                borderJoin: "round",
                borderDashOffset: 0,
                borderWidth: 2,
                borderColor: this.stylePreset[this.gaugeName].color,
              },
              width: 0,
            },
            data: [{ value: this.percent }],
          },
        ],
      };
      this.chartRef.setOption(option);
    },
  },
  mounted() {
    this.initChart();
    this.setChart();
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  :first-child {
    border-radius: 50%;
  }
}
</style>
